<!--
这个文件定义了一个名为 `Login` 的 Vue 组件，用于用户登录。
组件包含以下部分：
- template: 包含登录表单的结构和样式：
  - `loginForm` 容器包含以下内容：
    - `loginTitle`: 显示标题 "登录"。
    - 输入项：包括用户名和密码输入框，分别绑定到 `loginForm.userName` 和 `loginForm.password`。
    - 提交按钮：点击时调用 `login` 方法。
- script setup: 使用 Vue 3 的 `<script setup>` 语法，定义了以下内容：
  - 引入 `ref` 以创建响应式数据。
  - 引入 `useUserStore` 以访问用户状态。
  - 引入 `ElMessage` 以显示消息提示。
  - 引入 `axios` 以发送 HTTP 请求。
  - 引入 `router` 以进行路由导航。
  - 定义 `loginForm` 响应式对象，包含用户名和密码字段。
  - 定义 `login` 方法，用于处理登录逻辑。
-->

<template>
    <div id="loginForm">
        <span id="loginTitle">登录</span>
        <div class="input-item">
            <div class="input-title">用户名</div>
            <input class="input" v-model="loginForm.userName">
        </div>
        <div class="input-item">
            <div class="input-title">密码</div>
            <input type="password" class="input" v-model="loginForm.password">
        </div>
        <div class="input-item">
            <button class="submit-btn" @click="login">登录</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/userStore';
import { ElMessage } from 'element-plus'
import axios from '@/services/axios.js'
import router from '../../router';

const userStore = useUserStore()

const loginForm = ref({
    userName: '',
    password: ''
})

function login () {
    if (formCheck()) {
        axios.post('/login', loginForm.value)
            .then(response => {
                if (response.data.code === 1) {
                    userStore.login(response.data.data)
                    ElMessage.success({
                        message: '登录成功',
                        type: 'success',
                        plain: true
                    })
                    routerPush()
                } else {
                    ElMessage.error({
                        message: response.data.msg,
                        type: 'error',
                        plain: true
                    })
                }
            })
            .catch(error => {
                console.log(error)
                ElMessage.error({
                    message: '登录失败,请联系管理员',
                    type: 'error',
                    plain: true
                })
            })
    }
}

function formCheck () {
    if (loginForm.value.userName === '' || loginForm.value.password === '') {
        ElMessage.error({
            message: '用户名或密码不能为空',
            type: 'error',
            plain: true
        })
        return false
    }
    return true
}

function routerPush () {
    if (userStore.isAdmin) {
        router.push('/admin')
    } else {
        router.push('/user')
    }
}
</script>

<style scoped>
#loginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loginTitle {
    margin-top: 150px;
    font-size: 45px;
    font-weight: bold;
    color: #2a598a;
}

.input {
    margin-top: 10px;
    width: 400px;
    height: 60px;
    padding: 0 25px;
    outline: none;
    font-size: 16px;
    border-radius: 25px;
    border: 1px solid #ccc;
}

.input-item {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.input-title {
    color: #7e7e7e;
    padding-left: 25px;
}

.submit-btn {
    margin-top: 30px;
    width: 450px;
    height: 60px;
    border-radius: 25px;
    border: 1px solid #333;
    background-color: #2a598a;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
</style>